<template>
  <div id="test-subject" style="height:160px;"></div>
</template>
<script>
// 1. 导入 echarts
import * as echarts from 'echarts'
export default {
  name: 'testSubject',
  components: {},
  watch: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {
    var myChart = echarts.init(document.getElementById('test-subject'))
    // 2. 指定配置项和数据
    var option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      // 注意颜色写的位置
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
      series: [
        {
          name: '点位统计',
          type: 'pie',
          // 如果radius是百分比则必须加引号
          radius: ['20%', '70%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          data: [
            { value: 50, name: '前端' },
            { value: 40, name: 'java' },
            { value: 30, name: 'python' },
            { value: 20, name: 'c++' },
            { value: 10, name: 'UI' }
          ],
          // 修饰饼形图文字相关的样式 label对象
          label: {
            fontSize: 10
          },
          // 修饰引导线样式
          labelLine: {
            // 连接到图形的线长度
            length: 6,
            // 连接到文字的线长度
            length2: 8
          }
        }
      ]
    }

    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option)
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener('resize', function() {
      // 让我们的图表调用 resize这个方法
      myChart.resize()
    })
  },
  methods: {}
}
</script>
<style lang="less" scoped>
</style>
